<template>
  <div class="route-pannel">
    <mars-table class="mars-noHeader-table" :columns="columns" :data-source="roamLineData" size="small"
      :showHeader="false" :bordered="false" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-space>
            <mars-icon icon="take-off" @click="startRoamFly(record)" width="16" />
            <mars-icon icon="edit-two" width="16" @click="showEditor(record)" />
            <mars-icon icon="delete" width="16" color="#f96868" @click="deleteRoam(record)" />
          </a-space>
        </template>
      </template>
    </mars-table>
    <div class="f-pt f-tac f-mb tools_roam">
      <div class="f-mb">
        <mars-button class="add-line" @click="addRouteLine">
          <template #icon>
            <mars-icon icon="add-one" width="20"></mars-icon>
          </template>
          新增路线
        </mars-button>
      </div>
      <a-space>
        <a-upload :multiple="false" name="file" accept="json,geojson" :file-list="fileList" :showUploadList="false"
          :supportServerRender="true" :beforeUpload="() => false" @change="importFile">
          <mars-button class="import-btn">导入</mars-button>
        </a-upload>
        <mars-button class="out-btn" @click="saveFile">导出</mars-button>
      </a-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
import * as mapWork from "./map"

interface FileItem {
  uid: string
  name?: string
  status?: string
  response?: string
  url?: string
}

interface FileInfo {
  file: FileItem
  fileList: FileItem[]
}

const props = defineProps<{
  flyData: any[]
}>()

watch(() => props.flyData, (newVal) => {
  roamLineData.value = newVal
})

const fileList = ref<FileItem>()

const columns = [
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    width: 200
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    align: "center"
  }
]

interface TableItem {
  name: string
  key: string
}
const roamLineData = ref<TableItem[]>([])

const emit = defineEmits(["editData", "roamStart"])

// 新增漫游路线
const addRouteLine = () => {
  mapWork.addRouteLine()
}

// 开始漫游
const startRoamFly = (item: any) => {
  emit("roamStart", item.key)
}

// 删除漫游
const deleteRoam = (item: any) => {
  mapWork.handleRoamById(item.key, "remove")
}

// 保存文件
const saveFile = () => {
  mapWork.saveFile()
}

// 导入文件
const importFile = async (info: FileInfo) => {
  mapWork.impFile(info.file)
}

// 显示属性编辑面板
const showEditor = (item: any) => {
  emit("editData", item.key)
}
</script>

<style lang="less" scoped>
.mars-noHeader-table {
  height: calc(100% - 100px);
  overflow-y: auto;

  :deep(.ant-table) {
    margin-top: 10px;

    .ant-table-tbody {
      .ant-table-row {
        display: flex;
        width: 296px;
        border-radius: 2px;
        border: 1px solid rgba(234, 242, 255, 0.1);
        background: rgba(234, 242, 255, 0.2);
        margin-bottom: 10px;
        cursor: pointer;


        &:hover {
          background: rgba(234, 242, 255, 0.4);
        }
      }

      .ant-table-row-selected {
        background: rgba(234, 242, 255, 0.4);

      }

      .ant-table-placeholder {
        td {
          position: relative !important;
        }
      }

      .ant-table-cell {
        border: none !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 216px;

        &:last-child {
          position: absolute;
          right: 0;
        }

      }
    }

    .ant-table-container {
      border: none !important;
    }
  }
}

.add-line {
  width: 300px;
}

.import-btn,
.out-btn {
  width: 146px;
}

.route-pannel {
  height: 100%;
  padding: 0 14px 14px 14px;
}

.tools_roam {
  position: absolute;
  bottom: 10px;
}
</style>
